<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8 />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Picturefill - srcset and sizes attributes</title>
		<link href='//fonts.googleapis.com/css?family=Raleway:500|Source+Sans+Pro:400|Source+Sans+Pro:900' rel='stylesheet' type='text/css'>

		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>
		<link href="https://raw.githubusercontent.com/ResponsiveImagesCG/responsiveimages.org/master/img/favicon.ico" rel="icon">
		<script async="" src="../dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
		<script async="" src="../dist/picturefill.min.js"></script>
	</head>
	<body>

		<main>
			<h1 class="hed">Picturefill</h1>
			<p class="subhed">A responsive image polyfill</p>
			<span class="ricg-seal">Officially endorsed by the <abbr title="Responsive Issues Community Group">RICG</abbr></span>

			<h2 class="hed-pattern"><code>media</code> and <code>srcset</code> syntax</h2>

			<p>The <code>1x</code>, <code>2x</code> syntax in <code>srcset</code> acts as a shorthand for more complex resolution media queries. When natively supported, <code>srcset</code> will allow the UA to override requests for higher-resolution options based on a bandwidth limitations or a user preference (see #9 in the <a href="http://usecases.responsiveimages.org/#h2_requirements">Responsive Images Use Cases and Requirements</a>).</p>

<pre><code>&lt;picture&gt;
  &lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
  &lt;source srcset=&quot;../examples/images/large.jpg, ../examples/images/extralarge.jpg 2x&quot; media=&quot;(min-width: 800px)&quot;&gt;
  &lt;source srcset=&quot;../examples/images/small.jpg, ../examples/images/medium.jpg 2x&quot;&gt;
  &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
  &lt;img srcset=&quot;../examples/images/small.jpg, ../examples/images/medium.jpg 2x&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;</code></pre>

		<picture>
			<!--[if IE 9]><video style="display: none;"><![endif]-->
			<source srcset="../examples/images/large.jpg, ../examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
			<source srcset="../examples/images/small.jpg, ../examples/images/medium.jpg 2x">
			<!--[if IE 9]></video><![endif]-->
			<img srcset="../examples/images/small.jpg, ../examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
		</picture>



	</body>
</html>
